<template>
  <dialogPublic
    title="电子签名"
    :show.sync="showDialog"
    @doSubmit="toElectronicSign"
    width="800px"
    @doClose="doClose"
  >
    <div class="electronic">
      <div class="upload-file">
        <label>请核对并完善手机号</label>
      </div>
      <el-form :model="form" :rules="rules" ref="form">
        <el-table border class="electronic-table" :data="form.tableData" ref="table">
          <el-table-column class="name" property="name" label="用户名">
            <template slot-scope="scope">
              <el-form-item>
                <!-- <el-input v-model="scope.row.name" placeholder="请输入姓名"></el-input> -->
                <span>{{ scope.row.name }}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column class="phone" property="phone" label="手机号">
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.phone'" :rules="rules.phone">
                <el-input
                  class="phone-input"
                  v-model="scope.row.phone"
                  placeholder="请输入手机号"
                  @change="savePhone(scope.row,scope.$index)"
                ></el-input>
                <!-- <span v-else>{{ scope.row.phone }}</span> -->
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div class="upload-file">
        <span class="labelSpan">
          <label>签名文档</label>
        </span>
        <span class="attachFileList">
          <attachFormNew
            style="width: 100%"
            :limit="1"
            disabled
            isDelete
            isInstantUpload
            :attachSetting="reportSetting"
            ref="reportForm"
          ></attachFormNew>
        </span>
      </div>
    </div>
  </dialogPublic>
</template>
<script>
import {
  createSignFile,
  createSignContract,
  updateUserPhone
} from "@/api/common.js";
import {
  getUserListApi,
  updateserPhone
} from "@/api/orderManagement/experimentOrder";
export default {
  props: {
    showElectronicSign: {
      type: Boolean,
      default: true
    },
    electronicForm: {
      type: Array,
      default: () => {
        return [];
      }
    },
    electronicData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    reportSetting: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {},
  created() {
    this.getUserList();
  },
  data() {
    return {
      userInfo: this.$store.getters.userInfo,
      showDialog: true,
      fileData: {},
      form: {
        tableData: []
      },
      rules: {
        name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        phone: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          { pattern: /^1[0-9]{10}$/, message: "请输入正确的手机号码" }
        ]
      }
    };
  },
  methods: {
    //关闭电子签名
    doClose() {
      this.$emit("update:showElectronicSign", false);
    },
    //获取试验员列表数据
    getUserList() {
      let { experimentEquipmentId } = this.electronicForm[0];
      let form = {
        experimentEquipmentId, // 作业 表单设备表ID
        experimentId: this.electronicData.id //工单ID
      };
      getUserListApi(form).then(res => {
        //把当前登录用户加进去
        let { name, phone, id } = this.userInfo;
        let obj = {
          name,
          phone,
          account: id
        };
        let data = [obj].concat(res.data);
        this.form.tableData = data;
      });
    },
    // 电子签名确定
    async toElectronicSign() {
      let { tableData } = this.form;
      let workTicketId = tableData[1].experimentEquipmentId; //试验工单设备表ID
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.fileData = this.$refs.reportForm.getFileListData()[0];
          //将文件传到电子签章的库里面
          let { extension, name, id } = this.fileData;
          let form = {
            fileType: extension,
            title: name.split(".")[0],
            workTicketId,
            fileId: id
          };
          createSignFile(form, { test: "123456" }).then(res => {
            if (res.data) {
              this.createByCategory(res.data);
            }
          });
        }
      });
    },
    createByCategory(id) {
      let { tableData } = this.form;
      let contact = []; //签名人电话
      let tenantNameForSign = []; //签名人姓名
      let workTicketId = tableData[1].experimentEquipmentId; //试验工单设备表ID
      let subject = this.fileData.name.split(".")[0]; //附件的名字
      let createName = "";
      let creatorContact = "";
      tableData.map((i, index) => {
        let { phone, name } = i;
        if (index == 0) {
          createName = name;
          creatorContact = phone;
        } else {
          contact.push(phone);
          tenantNameForSign.push(name);
        }
      });
      let form = {
        createName,
        creatorContact,
        documentId: id,
        contact: contact.toString(),
        subject, //附件的名字
        sn: "workTicket",
        workTicketId,
        tenantNameForSign: tenantNameForSign.toString()
      };
      createSignContract(form).then(res => {
        if (res.data) {
          this.$message.success("已成功发送签名短信！");
        } else {
          this.$message.warning("签名合同创建失败！");
        }
        this.doClose();
      });
    },
    //保存试验员电话
    savePhone(row, index) {
      const actionApi = queryData => {
        return index == 0
          ? updateUserPhone(queryData)
          : updateserPhone(queryData);
      };
      actionApi(row)
        .then(res => {})
    }
  }
};
</script>
<style lang="less" scoped>
.electronic {
  width: 600px;
  margin: 0 auto;
  .upload-file {
    margin-top: 10px;
    width: 100%;
    text-align: left;
    display: flex;
    flex-flow: wrap nowrap;
    .labelSpan {
      width: 80px;
    }
    .attachFileList {
      width: calc(100% - 80px);
    }
    label {
      height: 28px;
      line-height: 28px;
      margin-right: 12px;
    }
    label::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
  }
  .electronic-table {
    margin-top: 10px;
    /deep/ th > .cell::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
    /deep/ th:first-child > .cell::before {
      content: "";
    }
    /deep/ th > .cell {
      text-align: center;
    }
    /deep/ .cell {
      text-align: center;
    }
    /deep/ .el-input__inner {
      height: 28px;
      line-height: 28px;
    }
    /deep/ .el-form-item__error {
      position: relative;
    }
  }
}
</style>